<template>
  <a-drawer
    :title="title"
    placement="right"
    :closable="true"
    :width="width"
    :visible="visible"
    @close="onClose"
    destroyOnClose
  >
    <a-tabs type="card" @change="callback">
      <a-tab-pane key="1" tab="基本信息">
        <basic-info-tab ref="basicInfoTab" :record="model"></basic-info-tab>
      </a-tab-pane>
      <a-tab-pane key="2" tab="巡查照片">
        <inspection-image-tab ref="inspectionImageTab" :record="model"></inspection-image-tab>
      </a-tab-pane>
    </a-tabs>

    <a-button style="width: 100%" type="primary" @click="onClose">关闭</a-button>
  </a-drawer>
</template>

<script>

  import basicInfoTab from "./tab/basicInfoTab";
  import inspectionImageTab from "./tab/inspectionImageTab";

  export default {
    name: "inspectionDetailModal",
    components:{
      basicInfoTab,inspectionImageTab
    },
    data() {
      return {
        visible: false,
        title: "",
        model: {},
        width: '100%'
      }
    },
    methods: {
      //切换选项卡时调用
      callback(key) {
        //console.log(key);
      },
      showDrawer(record) {
        this.visible = true;
        this.model = record;
      },
      onClose() {
        this.visible = false;
      },
    }
  }
</script>

<style scoped>

</style>